<template>
	<div>
		<el-table :data="tableData" style="width: 100%" border>
			<el-table-column label="属性" width="200">
				<template v-slot="scope">
					<div><strong>{{ scope.row.attribute }}</strong></div>
				</template>
			</el-table-column>
			<el-table-column label="数值">
				<template v-slot="scope">
					<div>{{ scope.row.value }}</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import axios from "axios";

export default {
	props: {
		name: {
			type: String,
			default: () => ({})
		}
	},
	data() {
		return {
			tableData: [], // 存储从后端获取的数据
			intervalId: null // 定时器 ID
		};
	},
	mounted() {
		this.intervalId = setInterval(() => {
			this.fetchData();
		}, 2000);
	},
	beforeDestroy() {
		// 清除定时器以防内存泄漏
		if (this.intervalId) {
			clearInterval(this.intervalId);
		}
	},
	methods: {
		fetchData() {
			axios.get(`http://10.112.241.175:2333/getResult?name=${this.name}`)
				.then(response => {
					if (response.data && response.data.length > 0) {
						this.tableData = this.formatData(response.data[0]); // 假设只取第一项数据
						//   clearInterval(this.intervalId); // 停止定时器
					}
					console.log("Data fetched:", this.tableData);
				})
				.catch(error => {
					console.error("Error fetching data:", error);
				});
		},
		formatData(data) {
			// 将数据格式化为属性和值对

			if (data.architecture == "0") {
				data.architecture = "标准架构";
			} else {
				data.architecture = "联邦架构";
			}
			return [
				{ attribute: '架构', value: data.architecture },
				{ attribute: 'Service ID', value: data.ServiceID },
				{ attribute: '网元名称', value: "UPF-" + data.UPFNum },
				{ attribute: '业务1流量', value: data.Count1 },
				{ attribute: '业务2流量', value: data.Count2 },
				{ attribute: 'CPU负载', value: data.CPUFlout },
				{ attribute: '内存负载', value: data.MemoryLoad },
				{ attribute: '网络IO', value: data.NetworkIOFlout },
				{ attribute: '负载情况', value: data.LoadStatus },
				// { attribute: '执行时间', value: data.ExecutionTime }
			];
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../table.scss";

.el-table {
	background-color: transparent;
	/* 透明背景 */
	border: none;
	/* 去除表格的边框 */
}

.el-table th,
.el-table td {
	background-color: transparent !important;
	/* 透明背景 */
	border: none !important;
	/* 去除每个单元格的边框 */
}

.el-table th {
	font-weight: bold;
	color: #333;
	/* 修改表头的字体颜色 */
}

.el-table .el-table__cell {
	padding: 10px 20px;
	/* 为单元格增加内边距 */
	color: #333;
	/* 设置文本颜色 */
}
</style>